<template>
	<view class="focus">
		<!-- <view>/ -->

		<view class="focusLogo">
			<view style="margin-top: -43px;margin-left: 1px;display: flex;">
				<view @click="returnClick" class="img" style="width: 10%;">
					<span class="right-arrow"></span>
				</view>
				<view style="font-size: 17px;color: #fff;font-weight: 600;    margin-top: 12px;margin-left: 16px;">
					{{userData.userName}}的主页
				</view>
			</view>
			<view v-if="homelist.ownerUserId == userObj.user_id"
				style="float: right;margin-top: -20px;margin-right: 20px;display: flex;">
				<vire style="color: #fff;font-weight: 600;margin-right: 20px;">发私信</vire>
				<view style="width: 20px;height: 20px;">
					<image @click="addReslit" style="width: 100%;height: 100%;" src="../../static/image/addres.png"
						mode="">
					</image>
				</view>
			</view>

			<view v-else style="float: right;margin-top: -40rpx;padding-right: 26rpx;">
				<view class="follow" @click="fllowBtnone">
					{{userObj.concernFlag == false?'关注Ta+': '取消关注'}}
				</view>
			</view>


			<image class="focusLog_img" @click="back()" mode=""></image>
			<view class="u-m-t-20 repair-box u-p-30 u-p-l-40 u-p-r-30">
				<view style="display: flex;">
					<view class="list-img" @click="ownSet">
						{{userData.publisher_role }}
						<image style="width: 100%;height: 100%;border-radius: 50%;" v-if="userData.headImg"
							:src="userData.headImg"></image>
						<image style="width: 100%;height: 100%;border-radius: 50%;" v-else
							src="https://clhy-img.oss-cn-beijing.aliyuncs.com/logo/avatar.jpg"></image>
						<image class="avatar-icon avatar-right-icon"
							:src="userData.publisher_role==1||userData.publisher_role==2?'/static/image/owner2.png':userData.publisher_role==4?'/static/image/1.png':'/static/image/tenant.png'">
						</image>
					</view>
					<view style="margin-left: 20rpx;" @click="ownSet">

						<view class="named">
							<view style="color: #FFFFFF;font-weight: 600;">
								{{userData.nickName!=null?userData.nickName:'Vip'+ userData.userId}}
							</view>
						</view>
						<view
							style="width: auto;border: 1px solid #fff;border-radius: 23px;color: #fff;background: #c3e69b99;display: flex;padding: 1px 8px;margin-top: 5px;">
							<view style="display: flex;margin-top: 2px;">
								<view style="margin-top: 2px;">
									<image v-if="userData.sex == 1" style="width: 15px;height: 15px;"
										src="../../static/image/sex.png" mode=""></image>
									<image v-if="userData.sex == 2" style="width: 15px;height: 15px;"
										src="../../static/image/3d4497383295a21042624143edb1c9c.png" mode=""></image>
								</view>
								<view style="margin-left: 5px;margin-top: 1px;">{{userData.age}}岁</view>
								<view style="margin-left: 5px;margin-top: 1px;">ID:{{userData.userId}}</view>
							</view>
						</view>
					</view>
					<view class="love-fast">
						<view class="love">
							<view>
								<text class="num">{{userData.vermicelliCount}}</text>
								<text class="feisi">粉丝</text>
							</view>
							<view>
								<text class="num">{{userData.concernCount}}</text>
								<text class="feisi">关注</text>
							</view>
						</view>
					</view>

				</view>
				<!-- 
					<view style="float: right;margin-top: -50px;padding-right: 230rpx;" 
						v-if="homelist.ownerUserId != userObj.user_id">
						<view class="follow" @click="fllowBtnone">
							{{userObj.concernFlag == false?'关注+': '取消关注'}} 
						</view>
					</view> -->

				<view v-if="userData.school != null && userData.introduction != null"
					style="border: 1px solid #fff;border-radius: 5px;margin-top: 40rpx;padding: 10px;color: #fff;background: #c3e69b99;">
					<view v-if="userData.school != null">毕业学校：{{userData.school}}</view>
					<view v-if="userData.introduction != null" style="margin-top: 3px;">简介：{{userData.introduction}}
					</view>
				</view>
			</view>
		</view>
		<view v-if="clapListData.length == 0">
			<view style="width: 232px;height: 242px;margin: 60px auto;">
				<image style="width: 100%;height: 100%;" src="../../static/image/9015d0e9f45344c4007d408cd271f6a.png"
					mode=""></image>
			</view>

			<view style="width: 62%;margin: -47px auto;text-align: center;color: #999;">这个人很懒，什么都没有留下！！！</view>
		</view>

		<view v-for="(item,index) in clapListData">
			<view style="border-top: 1px solid #F7F8F9;background-color: #FFFFFF;margin-top: 10px;">
				<view class="u-m-t-20 repair-box u-p-30 u-p-l-30 u-p-r-30">
					<view>
						<view style="display: flex;justify-content:space-between">
							<view style="display: flex;">
								<view class="list-img2">
									<image v-if="item.privacy_classification == 2"
										src="https://clhy-img.oss-cn-beijing.aliyuncs.com/logo/avatar.jpg"
										style="width: 100%;height: 100%;border-radius: 50%;"></image>
									<image v-else-if="item.user_front_head_portrait"
										:src="item.user_front_head_portrait"
										style="width: 100%;height: 100%;border-radius: 50%;"></image>
									<image style="width: 100%;height: 100%;border-radius: 50%;" v-else
										src="https://clhy-img.oss-cn-beijing.aliyuncs.com/logo/avatar.jpg"></image>
								</view>

								<view style="margin-left: 20rpx;">
									<view class="named" style="display: flex;">
										<view style="display: flex;">
											<view style="font-weight: 600;">
												{{item.user_nickname !=null ?item.user_nickname === "***"?'匿名用户':
													  item.user_nickname.substring(0,6)+'...' : 'Vip' + item.user_id}}
											</view>
											<view style="color: #399300;">【{{item.proName}}】</view>
										</view>
									</view>
									<view class="title">{{item.begin_time}}</view>
								</view>
							</view>

							<view style="display: flex;">
								<view>
									<view v-if="item.type_classification == 1" class="type-status">
										<image class="img-center" src="../../static/image/report.png" mode=""></image>报事
									</view>
									<view v-if="item.type_classification == 2"
										style="border: 1px solid #FFF5E7;background: #FFF5E7;color: #F9A832;border-radius: 5px;padding: 3px 10px;">
										<image class="img-center" src="../../static/image/eport.png" mode=""></image>报修
									</view>
									<view v-if="item.type_classification == 3"
										style="border: 1px solid #FFF1F3;background: #FFF1F3;color: #F15D73;border-radius: 5px;padding: 3px 10px;">
										<image class="img-center" src="../../static/image/mood.png" mode=""></image>心情
									</view>
								</view>
							</view>

						</view>
					</view>
					<view style="margin-top: 10px;margin-left: 10px;">
						<view>{{item.photo_remarks}}</view>
					</view>
					<view style="display: flex;justify-content: space-between;padding: 10px;"
						v-if="item.firstPhoto != ''">
						<view :style="indexs==0?'width: 103px;height: 103px;'
										 :indexs == 1?'width: 103px;height: 103px;margin-left: 10px;'
										 :'width: 103px;height: 103px;margin-left: 10px;'" v-for="(items,indexs) in item.firstPhoto.split(',')">
							<image style="width: 100%;height: 100%;border-radius: 14rpx;"
								@click="preview(items,indexs,item.firstPhoto.split(','))" :src="items"
								mode="aspectFill"></image>
						</view>
					</view>
					<view style="margin-left: 10px;font-size: 15px;color: #999;" v-if="item.type_classification != 3">
						<image class="hand-photo-postion" @click="check(userObj)" src="../../static/image/address1.png"
							mode=""></image>
						<text style="color: #000;">{{item.building_location}} </text>
					</view>

					<view class="complete">
						<view v-if="item.type_classification != 3">
							<!-- 新状态：1/客服待接单。2、客服待派单。3、维接待接单。4、待维修。5、维修中。6 维修结束 -->
							<view class="u-flex" v-if="item.problem_status == 1">
								<image class="image_handle" src="../../static/image/kf_pending_orders.png" mode=""
									mode=""></image>
								<view class="maintenance_status">客服待接单</view>
							</view>
							<view class="u-flex" v-if="item.problem_status == 2">
								<image class="image_handle" src="../../static/image/waiting_list.png" mode="" mode="">
								</image>
								<view class="maintenance_status">客服待派单</view>
							</view>
							<view class="u-flex" v-if="item.problem_status == 3">
								<image class="image_handle" src="../../static/image/wx_pending_orders.png" mode=""
									mode=""></image>
								<view class="maintenance_status">处理人待接单</view>
							</view>
							<view class="u-flex" v-if="item.problem_status == 4">
								<image class="image_handle" src="../../static/image/repaired.png" mode="" mode="">
								</image>
								<view class="maintenance_status">待处理</view>
							</view>
							<view class="u-flex" v-if="item.problem_status == 5">
								<image class="image_handle" src="../../static/image/maintenance.png" mode="" mode="">
								</image>
								<view class="maintenance_status">处理中</view>
							</view>
							<view class="u-flex" v-if="item.problem_status == 6">
								<image class="image_handle" src="../../static/image/completed.png" mode="" mode="">
								</image>
								<view class="maintenance_status">已完成</view>
							</view>
						</view>
					</view>

					<view style="margin-top: -30px;float: right;margin-right: 10px;width: 45%;">
						<view style="display: flex;justify-content: space-between;">
							<view @click="deteleClaplist(item)" v-if="item.delClick == true">
								<image style="width: 19px;height: 18px;margin-top: 2px;"
									src="../../static/image/delete (2).png" mode=""></image>
							</view>
							<view style="display: flex;" @click="navTo('/pages/clap/floowData',item)">
								<image style="width: 25px;height: 25px;" src="../../static/image/comment.png" mode="">
								</image>
								<view class="like_reply">{{item.comment_count}}</view>
							</view>
							<view style="display: flex;" @click="listBtn(item)">
								<image style="width: 25px;height: 25px;"
									:src="item.sfClick==true?'../../static/image/giewa.png':'../../static/image/givethe.png'"
									mode="">
								</image>
								<view class="like_reply">{{item.click_fabulous_count}}</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>

		<!-- 弹窗 -->
		<view class="modal" v-if="deletepop">
			<view class="modal-cont">
				<view class="modal-title">提示</view>
				<view style="display: flex;margin-top: 20px;">
					<view><span>是否删除词条数据</span></view>
				</view>

				<view class="modal-bottom">
					<view class="btn-cancel" @click="deletepop = false">取消</view>
					<view class="btn-sure" @click="getDelete()">确定删除</view>
				</view>
			</view>
		</view>

		<!-- 地图定位 -->
		<view class="modal2" v-if="consultMap">
			<view class="modal-cont2">
				<view class="modal-title2" style="margin-top: 18px;">
					地图定位
				</view>
				<map style="width: 100%; height: 400px;" :latitude="latitude" :longitude="longitude"
					:markers="mapCenter"></map>
				<view class="modal-bottom2">
					<view class="btn-cancel2" @click="consultMap = false">关闭</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	// import Tabs from '@/components/tabs';
	// import mixins from '@/utils/navigate';
	// import apis from '@/apis/index';
	export default {
		data() {
			return {
				fllowFlag: false,
				indexList: true,
				confirmDeal: [],
				// tableData:{}
				// con:"+关注",
				flag: false, //单位切换开关 
				clapListData: [],
				pageIndex: 1,
				//评论参数
				text: null, //评论内容
				userObj: {},
				userData: {},
				deletepop: false, //删除弹窗

				consultMap: false,
				mapCenter: [{
					id: 1,
					width: 100,
					height: 100,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../static/index/tbdw.png'
				}],
				latitude: 39.909,
				longitude: 116.39742,
				myProName: null,
				//根据路径返回
				callback:false
			};
		},
		// onLoad(options) {
		// 	this.people_concerned_id = options.people_concerned_id
		// 	console.log(this.people_concerned_id)
		// },
		onLoad(options) {
			const item = JSON.parse(decodeURIComponent(options.item));
			this.userObj = item
			console.log(this.userObj)
			if(item.callback){
				this.callback=true
			}else{
				this.callback=false
			}
		},
		onShow() {
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
			this.getclapList()
			this.getUserList()
			this.myProName = uni.getStorageSync('projectItem').proName
			console.log('this.myProName ', this.myProName)
		},

		methods: {
			ownSet(){
				uni.navigateTo({
					url: '/pages/mine/ownInfo'
				})
			},
			//查看地图定位按钮
			check(val) {
				this.mapCenter[0].latitude = val.latitude;
				this.mapCenter[0].longitude = val.longitude;
				this.longitude = val.longitude, // 回显位置的纬度
					this.latitude = val.latitude, // 回显位置的经度
					this.consultMap = true;
			},
			addReslit() {
				uni.navigateTo({
					url: '/pages/clap/resLIst'
				})
			},
			//取消关注
			fllowBtnone() {

				if (this.userObj.concernFlag == true) {
					this.userObj.concernFlag = false;
				} else {
					this.userObj.concernFlag = true
				}
				this.$request.api.followList({
					focus_on_people_id: this.homelist.ownerUserId, //关注人id
					people_concerned_id: this.userObj.user_id, //被关注人id
				}).then(res => {
					if (res.data.code == -1) {
						uni.showToast({
							title: '自己不可以关注自己！',
							icon: 'success'
						});
						this.userObj.concernFlag = false
					}
				})
			},
			//个人信息获取
			async getUserList() {
				this.$request.api.userData({
					user_id: this.userObj.user_id
				}).then(res => {
					this.userData = res.data.data
				})
			},
			//删除随手拍
			deteleClaplist(val) {
				this.deletepop = true
				this.deleteData = val
				console.log(this.deleteData)
			},
			getDelete() {
				this.$request.api.deleteClapList({
					id: this.deleteData.id
				}).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						});
						this.deletepop = false
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'error'
						});
					}
					this.getclapList()
				})
			},
			returnClick() {
				console.log("this.userObj",this.userObj);
				if(this.callback){
					uni.navigateBack({
						delta:1
					})
					// console.log("你好");
					// return
				}
				console.log('1111')
				uni.switchTab({
					url: '/pages/clap/indexclap'
				})
			},
			//关注
			fllowBtn() {
				if (this.userObj.concernFlag == true) {
					this.userObj.concernFlag = false;
				} else {
					this.userObj.concernFlag = true
				}
				this.$request.api.followList({
					focus_on_people_id: this.homelist.ownerUserId, //关注人id
					people_concerned_id: this.userObj.user_id, //被关注人id
				}).then(res => {

				})
			},
			//添加评论
			async sendOut() {
				this.$request.api.commentData({
					// answer_id:,//被评论id
					id: this.userObj.id, //随手拍id
					user_id: this.homelist.ownerUserId, //操作人id
					by_user_id: this.userObj.user_id, //被评论人id
					text: this.text, //评论内容
				}).then(res => {
					this.text = null
				})
			},
			fllowClick() {
				console.log('111')
				this.fllowFlag == true
			},
			//随手拍全部列表查询
			async getclapList() {
				let res = this.$request.api.clapList({
					pageIndex: this.pageIndex,
					user_id: this.userObj.user_id,
					selectUserId: this.homelist.ownerUserId,
					logotype: 1,
					// project_id: this.userObj.user_id == this.homelist.ownerUserId ? this.homelist.proId : null
				}).then(res => {
					this.clapListData = res.data.data.datalist
				})
			},
			//点赞
			listBtn(item) {
				if (item.sfClick == true) {
					item.sfClick = false;
					item.click_fabulous_count = item.click_fabulous_count - 1
				} else {
					item.sfClick = true
					item.click_fabulous_count = item.click_fabulous_count + 1
				}
				this.$request.api.givethumbs({
					user_id: this.homelist.ownerUserId,
					type: 1, //点赞状态:1、随手拍，2、评论
					id: item.id, //随手拍或评论id
				}).then(res => {
					this.getclapList()
				})

			},
			// // 图片预览
			// preview(item) {
			// 	uni.previewImage({
			// 		urls: [item],
			// 		current: 0,
			// 		longPressActions: {
			// 			success: function(data) {
			// 				console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
			// 			},
			// 			fail: function(err) {
			// 				console.log(err.errMsg);
			// 			}
			// 		}
			// 	});
			// },
			preview(item, indexs, imgarrs) {
				var imgarr = []
				for (let i = 0; i < imgarrs.length; i++) {
					imgarr.push(imgarrs[i])
				}

				uni.previewImage({
					urls: imgarr,
					current: indexs,
					// longPressActions: {
					// 	success: function(data) {
					// 		console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					// 	},
					// 	fail: function(err) {
					// 		console.log(err.errMsg);
					// 	}
					// }
				});
			},
			//跳转页面
			navTo(url, item) {
				let items = encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url: url + '?item=' + items
				});

			},
			shouList() {
				this.indexList = !this.indexList
			},

		}
	}
</script>

<style lang="scss">
	.avatar-icon {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.avatar-right-icon {
		width: 16px;
		height: 16px;
		position: absolute;
		top: 60rpx;
		right: -6px;
	}

	.type-status {
		border: 1px solid #EBF9FF;
		background: #EBF9FF;
		color: #11A9EC;
		border-radius: 5px;
		padding: 3px 10px;
	}

	.img-center {
		width: 11px;
		height: 11px;
		margin-right: 4px;
	}

	.focus {
		.love-fast {
			margin-top: 15px;
			justify-content: space-between;
			font-size: 12px;
			color: #fff;
			margin: 0 0 0 auto;

			.num {
				font-size: 16px;
			}

			.love {
				line-height: 40rpx;
			}

			.feisi {
				margin-left: 10rpx;
				color: #dedbdb;
			}

		}

		.focusLogo {
			width: 100%;
			padding-top: 74px;
			top: 0;
			background-image: url('../../static/image/background.png');
			position: relative;
			padding-bottom: 10rpx;

			.focusLog_img {
				position: absolute;
				top: 150rpx;
				left: 33rpx;
				width: 25rpx;
				height: 25rpx;
				color: #fff;
			}

			.LogoBox {
				display: flex;
				padding: 0 20rpx;

				.timeImg {
					width: 120rpx;
					height: 120rpx;

					.timeImg_img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.timeTxt {
					width: 60%;
					margin-left: 20rpx;

					.timeTxtT {
						display: block;
						font-size: 42rpx;
						padding-top: 20rpx;
						font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
						color: #fff;
					}

					.timeTxtB {
						display: inline-block;
						color: #fff;
						font-size: 30rpx;
						letter-spacing: 5rpx;
						margin-top: 15rpx;
					}
				}

				.concernG {
					width: 20%;
					height: 60rpx;
					background-color: #fff;
					color: #007AFF;
					text-align: center;
					border-radius: 40rpx;
					float: left;
					font-size: 30rpx;
					line-height: 60rpx;
					margin-top: 30rpx;
					letter-spacing: 3rpx;

					.concernGImg {
						width: 20rpx;
						height: 20rpx;
					}
				}
			}
		}

		.pendingMain {
			position: absolute;
			top: 400rpx;
			left: 0;
			padding: 0 20rpx;
			background-color: #fff;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;

			.time {
				margin-top: 40rpx;
				display: flex;

				.timeImg {
					width: 120rpx;
					height: 120rpx;

					.timeImg_img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.timeTxt {
					margin-left: 20rpx;

					.timeTxtT {
						display: block;
						font-weight: 900;
						font-size: 32rpx;
						padding-top: 20rpx;
						color: #333333;
					}

					.timeB {
						display: inline-block;
						color: #999999;
					}
				}
			}

			.address {
				margin-top: 30rpx;

				// height:200rpx;
				.addressBox {
					height: 50rpx;
					padding: 0 20rpx;
					line-height: 50rpx;
					color: #666666;
					font-size: 28rpx;

					.addressBoxL {
						letter-spacing: 3rpx;
					}

					.addressBoxR {
						margin-left: 10rpx;
						position: relative;

						.addressImg {
							width: 36rpx;
							height: 36rpx;
							line-height: 50rpx;
							margin-left: 30rpx;
							position: absolute;
							top: 0px;
							right: -60rpx;
						}
					}
				}
			}

			.main {
				// height: 120rpx;
				margin-top: 10px;

				.main_txt {
					display: block;
					padding: 38rpx 20rpx;
					// height: 120rpx;
					font-weight: 900;
				}
			}

			.pendingMain_img {
				display: flex;
				margin-top: 10px;

				.Main_img {
					flex: 1;
					height: 200rpx;
					padding: 0 20rpx;

					.Main_imgI {
						width: 100%;
						height: 100%;
						border-radius: 15rpx;
					}
				}
			}

			.addition {
				height: 300rpx;
				background-color: #fff;
				margin-top: 30rpx;

				.additionBox {
					height: 100rpx;
					line-height: 100rpx;
					padding: 0 40rpx;
					border-bottom: 1px solid #EEEEEE;
					font-weight: 900;

					.item {
						color: #007AFF
					}
				}

				.additionBox_list {
					float: right;
					display: block;
					color: #ccc;
					font-weight: 300;
					font-size: 40rpx;
				}

				.additionBox_r {
					float: right;
					display: block;
					color: #333;
					font-weight: 300;

					.list {
						color: #ccc;
					}
				}

			}
		}

	}

	.list-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		position: relative;
	}

	.named {
		display: flex;
		font-size: 30rpx;
		color: #333333;
		line-height: 40rpx;
	}

	.title {
		font-size: 26rpx;
		color: #FFFFFF;
		width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 5px;
	}

	.follow {
		height: 26px;
		line-height: 25px;
		text-align: center;
		padding: 0px 15px;
		border-radius: 16px;
		font-size: 11px;
		border: 1px solid #ffffff;
		float: right;
		background: linear-gradient(to bottom, #c3e69b99, #00aa008f);
		color: #fff;
	}

	.clap_box {
		width: 89%;
		margin: 0 auto;
	}

	.clap_box_img {
		width: 100%;
		margin-top: 24px;
	}

	.guar-text textarea {
		border-radius: 8px;
		// width: 345px;
		height: 120px;
		background: #F2F3F5;
		padding: 16rpx 20rpx !important;
		box-sizing: border-box;
	}

	.clap_box_imgtow {
		position: absolute;
		top: 102px;
		right: 175px;
		width: 50px;
	}

	.tab_nav {
		display: flex;
		justify-content: center;
		align-items: center;
		// color: #447A05;
	}

	.tab_nav .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}

	.active {
		position: relative;
		color: #447A05;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 4rpx;
		background-color: #447A05;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}

	.button {
		width: 30%;
		border-radius: 33px;
		line-height: 26px;
		border: 1px solid #CCCCCC;
		font-size: 14px;
	}

	.button1 {
		width: 22%;
		border-radius: 33px;
		line-height: 26px;
		border: 1px solid #CCCCCC;
		font-size: 14px;
	}

	.button:hover {
		border: 1px solid #F9A832;
		color: #FFFFFF;
		background-color: #F9A832;
	}

	.header-li {
		display: flex;
		// align-items: center;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 102rpx;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.header-name {
		width: 186rpx;
	}

	.form-select {
		width: 480rpx;
		background: url(../../static/image/right.png) no-repeat center right;
		background-size: 10rpx 17rpx;
	}

	.yilingqu {
		width: 80%;
		height: 84rpx;
		// background: #F9A832;
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
	}

	.list-img {
		width: 100rpx;
		height: 100rpx;
		// border-radius: 50%;
	}

	.list-img2 {
		width: 80rpx;
		height: 80rpx;
		// border-radius: 50%;
	}

	.named {
		display: flex;
		font-size: 30rpx;
		color: #333333;
		line-height: 40rpx;
	}

	.title {
		font-size: 26rpx;
		color: #999999;
		width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 5px;
	}

	.button_btn {
		width: 29%;
		border-radius: 33px;
		line-height: 26px;
		border: 1px solid #CCCCCC;
		font-size: 14px;
		margin-left: 2px;
	}

	.right-arrow {
		display: inline-block;
		position: relative;
		width: 28px;
		height: 28px;
		margin-right: 20px;
		top: 13px;
		color: #fff;
	}

	.right-arrow::after {
		display: inline-block;
		content: " ";
		height: 13px;
		width: 13px;
		border-width: 0 0 3px 3px;
		/* border-color: #0177ff; */
		border-style: solid;

		-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		position: absolute;
		// top: 50%;
		left: 31px;
	}

	.image_handle {
		width: 18px;
		height: 18px;
		padding-right: 10rpx;
	}

	.complete {
		padding: 0 20rpx;
		display: flex;
		text-align: center;
		font-size: 26rpx;
		height: 74rpx;
		background: #eeeeee80;
		padding: 20rpx;
		margin-top: 20rpx;
		border-radius: 14rpx;

		.maintenance_status {
			font-weight: 600;
			margin-top: 1px;
		}
	}

	.like_reply {
		margin-left: 8px;
		font-size: 16px;
		margin-top: 2px;
	}

	.modal2 {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 10;
	}

	.modal-cont2 {
		width: 610rpx;
		// min-height: 420rpx;
		background: #ffffff;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.modal-icon2 {
		width: 80rpx;
		height: 80rpx;
		margin-top: 67rpx;
	}

	.modal-title2 {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 45rpx;
		margin-top: 22rpx;
		align-items: center;
		border-bottom: 1px solid #ddd;
		padding: 0px 20px 10px;
		text-align: center;
		width: 89%;
		margin: auto;
	}

	.modal-content2 {
		width: 443rpx;
		// height: 88rpx;
		font-size: 28rpx;
		text-align: center;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 44rpx;
		margin-top: 24rpx;
	}

	.text-area2 {
		margin-top: 24rpx;
		width: 520rpx;
		padding: 10rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 44rpx;
		max-height: 105rpx;
		border: 1rpx solid #f0f0f0;
		border-radius: 8rpx;
	}

	.modal-bottom2 {
		width: 100%;
		height: 84rpx;
		border-top: 1rpx solid #e6e9ed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 50rpx;
	}

	.modal-bottom {
		width: 100%;
		height: 84rpx;
		border-top: 1rpx solid #e6e9ed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 50rpx;
	}

	.btn-cancel {
		width: 50%;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		border-right: 1rpx solid #d8d8d8;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		box-sizing: border-box;
	}

	.btn-cancel2 {
		width: 100%;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		border-right: 1rpx solid #d8d8d8;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		box-sizing: border-box;
	}

	.btn-sure {
		width: 50%;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #578ef0;
	}

	.btn-sure2 {
		width: 50%;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #578ef0;
	}

	.hand-photo-postion {
		width: 10px;
		height: 13px;
		margin-right: 10px;
		top: 2px;
	}

	.modal {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 10;
	}

	.modal-cont {
		width: 610rpx;
		// min-height: 420rpx;
		background: #ffffff;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.modal-icon {
		width: 80rpx;
		height: 80rpx;
		margin-top: 67rpx;
	}

	.modal-title {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 45rpx;
		margin-top: 22rpx;
		align-items: center;
		border-bottom: 1px solid #ddd;
		padding: 0px 20px 10px;
		text-align: center;
		width: 89%;
		margin: auto;
	}

	.modal-content {
		width: 443rpx;
		// height: 88rpx;
		font-size: 28rpx;
		text-align: center;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 44rpx;
		margin-top: 24rpx;
	}
</style>